<template>
  <view style="height: 100vh; background-color: #f3f4f6;">
    <tabbar :index="4"></tabbar>
    <!-- 显示头像 姓名 手机号 加头像上传功能 -->
    <view class="profile-top">
      <view class="user-info">
        <view>
          <view class="user-info--name">{{ user.nickName }}</view>
          <text class="user-info--account">{{ user.phonenumber || user.email || user.username }}</text>
        </view>
        <view>
          <!-- 修改此处 -->
          <up-avatar :src="avatar" size="120rpx"></up-avatar>
        </view>
      </view>
    </view>
    <!-- 边缘功能 上下左右增加padding 使用warp-->
    <view style="padding: 40rpx; margin: 20rpx; background-color: #fff;">
      <up-grid>
        <up-grid-item @click="navigateTo('/pages/center/profile')" style="margin-top: 20rpx;">
          <up-icon name="account-fill" color="#2979ff" size="60rpx"></up-icon>
          <text class="btn-text">个人资料</text>
        </up-grid-item>
        <up-grid-item @click="resetPassword = true" style="margin-top: 20rpx;">
          <up-icon name="lock-fill" color="#2979ff" size="60rpx"></up-icon>
          <text class="btn-text">修改密码</text>
        </up-grid-item>
        <up-grid-item @click="navigateTo('/pages/center/feedback')" style="margin-top: 20rpx;">
          <up-icon name="question-circle-fill" color="#2979ff" size="60rpx"></up-icon>
          <text class="btn-text">问题反馈</text>
        </up-grid-item>
        <!-- 新增智能客服选项 -->
        <up-grid-item @click="navigateTo('/pages/center/server')" style="margin-top: 40rpx;">
          <up-icon name="server-fill" color="#2979ff" size="60rpx"></up-icon>
          <text class="btn-text">智能客服</text>
        </up-grid-item>
        <!-- 获取eeg信号 -->
        <up-grid-item @click="navigateTo('/pages/index/geteeg/geteeg')" style="margin-top: 40rpx;">
          <up-icon name="server-fill" color="#2979ff" size="60rpx"></up-icon>
          <text class="btn-text">获取eeg信号</text>
        </up-grid-item>
      </up-grid>
    </view>
    <!-- 底部按钮 -->
    <view style="padding: 40rpx; margin-top: 20vh; margin-bottom: 80rpx;">
      <!-- 增加 margin-bottom -->
      <up-row gutter="32">
        <up-col span="6">
          <up-button icon="phone" text="联系我们" plain @click="copyPhoneNumber"></up-button>
        </up-col>
        <up-col span="6">
          <up-button icon="reload" text="退出" type="error" @click="logout"></up-button>
        </up-col>
      </up-row>
      <!-- 新增透明占位组件 -->
      <view style="height: 10vh; opacity: 0;"></view>
    </view>
    <!-- 密码重制弹窗 -->
    <Password :show="resetPassword" @close="resetPassword = false"></Password>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Password from '@/components/password.vue';
import { useStore } from 'vuex'; 
import { onShow } from '@dcloudio/uni-app';
// 导入类型
import type { UserInfo } from '@/types/user';

// 使用导入的类型定义响应式数据
const user = ref<UserInfo>({} as UserInfo);
const avatar = ref<string>('');
const resetPassword = ref<boolean>(false);
const store = useStore(); 

// 获取用户信息
const getInfo = async () => {
  const res = await store.dispatch('Info');
  user.value = res;
  avatar.value = `${process.env.BASE_URL}${res.avatar}`;
  console.log(avatar.value)
};

// 导航到指定页面
const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

// 退出登录
const logout = async () => {
  await store.dispatch('Logout');
  uni.reLaunch({
    url: '/pages/login/index',
  });
};

// 复制电话号码到剪贴板并提示用户
const copyPhoneNumber = () => {
  const phoneNumber = '1520346311';
  uni.setClipboardData({
    data: phoneNumber,
    success: () => {
      uni.showToast({
        title: '电话号码已复制',
        icon: 'success',
      });
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
      });
    },
  });
};

onShow(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
.profile-top {
  background-color: #fff;
  padding: 20px 40rpx;
}

.btn-text {
  font-size: 28rpx;
  color: #606266;
}

.user-info {
  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  max-width: 100%;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  color: #303133;

  &--name {
    font-size: 56rpx;
    font-weight: bold;
    width: 100%;
  }

  &--account {
    font-size: 36rpx;
    color: #909399;
  }
}
</style>
